<template>
    <div class="box">
        <div class="ju_jia_top">
            <a href="" class="ck">查看全部></a>
            <h1 class="bt">-收纳-</h1>
            <h2>温暖柔软，品质之选</h2>
        </div>

        <div class="ju_jia_butm">
            <a href="" class="sp">
                <img src="https://yanxuan-item.nosdn.127.net/0a2fff6e0b55178fbbe99d97d94d20a8.png" alt="">
                <p class="name">法国年份雅文邑700毫升</p>
                <p class="cd">经典产区限量单一老年份</p>
                <p class="pric">¥1480.00</p>
            </a>

            <a href="" class="sp">
                <img src="https://yanxuan-item.nosdn.127.net/330913911087b44b0d817dd78233165f.png" alt="">
                <p class="name">梅乃宿梅酒720毫升</p>
                <p class="cd">小藏手工酿造，百年名酒</p>
                <p class="pric">¥168.00</p>
            </a>

            <a href="" class="sp">
                <img src="https://yanxuan-item.nosdn.127.net/e3f387109491d92c47179d029d340b1f.jpg" alt="">
                <p class="name">多米尼加陈年朗姆酒700毫升</p>
                <p class="cd">陈年朗姆，香味芬芳</p>
                <p class="pric">¥238.00</p>
            </a>

            <a href="" class="sp">
                <img src="https://yanxuan-item.nosdn.127.net/54d1af8bc1e5e566b1455c8cbe3039aa.jpg" alt="">
                <p class="name">全新升级，四川酸辣粉195克*6杯</p>
                <p class="cd">秘制酱包，配料丰富，爽弹滑口更巴适</p>
                <p class="pric">¥69.00</p>
            </a>

            <a href="" class="sp">
                <img src="https://yanxuan-item.nosdn.127.net/0e1681ab3a4a5aaf185f0bb123f07f99.jpg" alt="">
                <p class="name">川味牛肉辣椒酱190克</p>
                <p class="cd">辣香麻爽，地道川渝风味</p>
                <p class="pric">¥38.00</p>
            </a>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.box {
    padding-top: 20px;

    .ju_jia_top {
        width: 1240px;
        height: 128px;
        background-color: white;
        display: flex; // 使用 Flex 布局
        flex-direction: column; // 垂直排列
        justify-content: space-between; // 在主轴上空间分配

        .bt {
            color: #666666;
            font-weight: 500;
            margin: auto; // 在垂直方向上居中
            font-size: 28px;
        }

        h2 {
            margin: auto; // 在垂直方向上居中
            color: #999999;
            font-size: 20px;
        }

        .ck {
            margin-left: auto; // 靠右居中
            padding-right: 10px;
            display: flex;
            color: #9FA19C; // 修改颜色，根据需要调整
            transition: color 0.3s; // 添加过渡效果
            text-decoration: none; // 去掉下划线
            &:hover {
                color: #4CAF50; // 鼠标悬停时颜色变为绿色
            }
        }
    }

    .ju_jia_butm {
        width: 1240px;
        height: 329.4px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        a {
            text-decoration: none; // 去掉下划线
            color: transparent; // 文字颜色透明
            transition: transform 0.2s, box-shadow 0.3s; // 添加过渡效果
            &:hover {
                transform: translateY(-5px); // 鼠标悬停时上移5px
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); // 添加阴影
                border: 1px solid #ddd; // 添加边框
            }
        }
        .sp {
            width: 160px;
            height: 256px;
            display: block;
            padding: 20px 30px;
            text-align: center;
            img {
                width: 160px;
                height: 160px;
            }
            .name {
                font-size: 16px;
                color: black;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-top: 5px;
            }
            .cd {
                color: #999;
                font-size: 14px;
                padding-top: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .pric {
                color: #cf4444;
                font-size: 20px;
                padding-top: 5px;
            }
        }
    }
}
</style>
